,<template>
  <div class="reward-main">
    <draggable class="list-group" v-model="goods"  @end="onEnd" >
      <!--                :move="checkMove" @start="dragging = true" @end="onEnd" >-->
      <transition-group type="transition" :name="'flip-list'" class="group-container"  >
        <div v-for="(item,index) in goods" :key="(item.id*10+index+10)" class="projects-box">
          <div class="project-item-box">
            <div class="good-info" @click="changeGoodInfo(item,index)">
              <span>奖励:</span>
              <!--          <span>{{item.type}}-</span>-->
              <span style="color: black">{{item.id==='' || item.id===undefined ? '空奖励': getBonuInfo(item)  }}</span>
              <span style="color: black">x{{item.num}}</span>
              <span></span>
            </div>
            <div class="good-action">
              <i class="el-icon-close buton-icon"    @click="removeAt(index,item)"></i>
              <i class="el-icon-document-copy buton-icon"   @click="cloneReward(index,item)"></i>
            </div>
          </div>
        </div>
      </transition-group>
    </draggable>
    <div class="add-award">
      <el-button class="add-award-text"  type="text" @click="AddItem">
        <span style="position: relative; " class="buton-icon-add">
<!--          <sapn class="" style="position: absolute;left: -30px">+</sapn>-->
          +新增奖励
        </span>
      </el-button>
    </div>

    <!--  弹窗   -->
    <!--    <div v-if="dialogFormVisible">-->
    <el-dialog title="奖励配置" width="800px" :visible="dialogFormVisible" :modal="true" @close="dialogFormVisible = false">
      <el-form :model="checkGood" :rules="rules" ref="checkGood" class="layout-item">
        <el-row type="flex" class="row-bg" justify="start" >
          <el-col :span="12">
            <el-form-item label="奖励类型" :label-width="formLabelWidth" prop="type">
              <el-select  v-model="checkGood.type" placeholder="请选择奖励类型" @change="SelectedType(checkGood.type,0)">
                <el-option  v-for="(item,index) in reward_type_list" :key="item.type" :label="item.type + '-' + item.name" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="start"  >
          <el-col :span="12">
            <el-form-item label="物品" :label-width="formLabelWidth" prop="id">
              <el-select v-model="checkGood.id" filterable placeholder="请选择" @change="handleSelect">
                <el-option
                    @click="chooseOption"
                    v-for="item in bounsSelects"
                    :key="item.id"
                    :label="item.id+'-'+item.value+'-'+item.price"
                    :value="item.id">
                </el-option>
              </el-select>
              <!--                  <el-input  style="width: 200px"  v-model.number="checkGood.name" :disabled="true"></el-input>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物品ID" :label-width="formLabelWidth" prop="id">
              <el-input style="width: 200px" v-model.number="checkGood.id"  :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="start">
          <el-col :span="12">
            <el-form-item label="物品数量" :label-width="formLabelWidth" prop="num">
              <el-input style="width: 200px" type="number" v-model.number="checkGood.num" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateReward()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    </div>-->
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: "reward.vue",
  props: {
    'gindex': 0
  },
  components: {
    draggable
  },
  data() {
    return {
      goods: [],
      checkGood: {
        a:{

        },
        remark: '',
        goods:[]
      },
      checkIndex: -1,
      reward_type_list: [],
      dialogFormVisible: false,
      rules: {
        type: [
          //     {
          //   required: true,
          //   message: '请选择奖励类型',
          //   trigger: 'blur'
          // },
          //   {
          //     type: 'number',
          //     message: '必须为数字值'
          //   }
        ],
        id:[
          // {
          //   required: true,
          //   message: '请选择物品',
          //   trigger: 'blur'
          // }
        ],
        name: [{
          required: true,
          message: '请输入name',
          trigger: 'blur'
        }],
        num: [
          //     {
          //   required: true,
          //   message: '请输入num',
          //   trigger: 'blur'
          // },
          //   {
          //     type: 'number',
          //     message: '必须为数字值'
          //   },
          //   {
          //     pattern: /^([1-9]\d*)(\.\d{1,6})?$|^0\.\d{1,6}?$/, message: '请输入大于零的数',trigger: 'blur'
          //   }

        ],
        raw_price: [{
          required: true,
          message: '请输入price',
          trigger: 'blur'
        },
          {
            type: 'number',
            message: '必须为数字值'
          }
        ],
        sale_price: [{
          required: true,
          message: '请输入price',
          trigger: 'blur'
        },
          {
            type: 'number',
            message: '必须为数字值'
          }
        ],
        reward_lv: [{
          required: true,
          message: '请输入奖励等级',
          trigger: 'blur'
        },
          {
            type: 'number',
            message: '必须为数字值'
          }
        ]
      },
      formLabelWidth: '100px',
      bounsSelects: [],
      bonusList: []
    }
  },
  methods:{
    //获取奖励信息
    getBonuInfo(item){
      let type = item.type
      let id = item.id
      const bonus = this.bonusList[type]
      for (let i = 0,len=bonus.length; i < len; i++) {
        if(bonus[i].id == id){
          return '['+bonus[i].id +']'+bonus[i].value+' $'+bonus[i].price
        }
      }
    },
    //删除
    removeAt(index,item){
      let info = this.getBonuInfo(item)
      this.$confirm(`删除奖励第${index}项，${info}, 继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.state.itemData.reward.goal_reward[this.gindex].reward.splice(index,1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //克隆
    cloneReward(index,item){
      let obj = JSON.parse(JSON.stringify(item))
      this.$store.state.itemData.reward.goal_reward[this.gindex].reward.push(obj)
      this.$message.success('克隆成功')
    },
    changeGoodInfo(item,index){
      this.checkGood = JSON.parse(JSON.stringify(item))
      this.bounsSelects = this.$store.state.bonusList[item.type]
      // console.log('this.checkGood',this.checkGood)
      this.checkIndex = index
      this.dialogFormVisible = true
    },
    //选择奖励类型
    SelectedType(type,isAdd){
      // console.log('isFirst',isAdd)
      // console.log('type',type)
      if(isAdd){
        return  this.checkGood.id = ''
        // this.bounsSelects = this.$store.state.bonusList[type]
      }
      this.checkGood.id = ''
      this.bounsSelects = this.$store.state.bonusList[type]
      // console.log(this.$store.state.bonusList,type)
      // console.log(this.bounsSelects)
    },
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost"
      };
    },
    //物品
    handleSelect(value){
      // console.log(value);
      // console.log(this.bounsSelects);
      // this.bounsSelects.forEach(item=>{
      //   if(item.id == value){
      //     // this.checkGood`.value` = item.id+'-'+ item.value +'-'+item.price
      //     return
      //   }
      // })
      // console.log(value)
    },
    //确定修改
    updateReward(){
      let checkGood = 'checkGood'
      this.$refs[checkGood].validate((status)=>{
        this.valided(status)
      })
      // this.dialogFormVisible = false
      // this.$store.state.discountData[this.gindex].goods[this.checkIndex] = this.checkGood
    },
    valided(status,items){
      if(status){
        if(this.Verify() == false){
          return
        }
        this.dialogFormVisible = false

        // this.checkIndex = this.$store.state.itemData.reward.wheel_reward.length
        this.$store.state.itemData.reward.goal_reward[this.gindex].reward[this.checkIndex] = this.checkGood
        this.$message.success('修改成功')
      }else {
        this.$message.error('请检查后再提交')
      }
    },
    onEnd() {
      this.$store.state.discountData[this.gindex].goods = this.goods
      // console.log(this.goods);
      // this.$emit('update:bonus_list', this.reward_data_list)
    },
    //修改前校验
    Verify(){
      try {
        if(this.checkGood.type === '') {
          this.$message.error('请选择奖励类型')
          return false
        }
        if(this.checkGood.id === '') {
          this.$message.error('请选择物品')
          return false
        }
        if(this.checkGood.num <=0) {
          this.$message.error('请输入正确数量')
          return false
        }
        if(this.checkGood.raw_price == false || this.checkGood.raw_price <= 0) {
          this.$message.error('请输入正确原价格')
          return false
        }
        if(this.checkGood.sale_price == false || this.checkGood.raw_price <= 0) {
          this.$message.error('请输入正确折扣价格')
          return false
        }
        if(this.checkGood.limit_num == false || this.checkGood.limit_num<-1) {
          this.$message.error('请输入正确限制数')
          return false
        }
      }catch (e) {
        return false
      }
      return true

    },
    //新增
    AddItem(){
      let good = {
        "type": 0,
        "id": 0,
        "num": 1
      }
      this.changeGoodInfo(good,this.goods.length)
      // this.$store.state.discountData[this.gindex].goods.push(good)
    },
    //选中option
    chooseOption(item){
      // console.log('item',item)
    }
  },
  mounted() {
    // this.goods = this.$store.state.itemData.reward.wheel_reward
    this.goods = this.$store.state.itemData.reward.goal_reward[this.gindex].reward
    // console.log('this.$store.state.itemData.big_reward',this.$store.state.itemData.reward.big_reward)
    // console.log('his.$store.state.-------------------',this.$store.state.rewardList)
    // console.log('this.$store.state.bonusLis-------------',this.$store.state.bonusList)
    this.reward_type_list = this.$store.state.rewardList
    this.bounsSelects = this.$store.state.bonusList[0]
    this.bonusList = this.$store.state.bonusList
  }
}
</script>

<style scoped>
.reward-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.projects-box{
  min-width: 500px;
}
.project-item-box{
  max-width: 700px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-style: dashed;
  border-bottom-color: #409EFF;
  border-bottom-width: 1px;
}
.good-info{
  color: #409EFF;
}
.good-info:hover{
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  background-color: antiquewhite;
}
.good-action{
  display: flex;
  justify-content: flex-end;
  width: 60px;
  margin-left: 40px;
}
.buton-icon{
  width: 23px;
  height: 23px;
  font-size: 20px;
  color: black;
}
.buton-icon:hover{
  width: 23px;
  height: 23px;
  font-size: 22px;
  color: #409EFF;
  /*padding-left: 5px;*/
}
.buton-icon-add{
  overflow: hidden;
}
.buton-icon-add:hover{
  overflow: visible;
}
.good-action>*{
  font-size: larger;
  padding-right: 10px;
}
.good-action>*:hover{
  cursor: pointer;
}
.add-award{
  min-width: 500px;
  height: 30px;
  /*position: absolute;*/
  float: right;
  left: 350px;
}
.add-award-text{
  padding-top: 5px;
  padding-bottom: 5px;
  float: right;
  font-size: 15px;
}
.add-award-text:hover{
  background-color: white;
  border-radius: 5px;
}

.group-container {
  display: flex;
  flex-direction: column;
}

</style>